<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script language="javascript" type="text/javascript">
    this.moveTo(0,0)
    this.resizeTo(screen.width,screen.height)
    </script>
  </head>
  <body>
    <div class="main">
      <div class="center_text">菜</div>
      <div class="user_life_view"></div>
      <!-- <div class="enemy_bullet3 enemy_bullet3_rotate"></div> -->
      <div class="time">
        <canvas id="time" width="800" height="200"></canvas>
      </div>

      <canvas id="cvs" width="500" height="500"></canvas>
      <div class="jiguang"></div>

      <div class="star"></div>
      <div class="yinyang">
        <div class="contents">
          <!-- <div class="center"></div> -->
        </div>
      </div>
      <script>
        window.onload = function () {
          var canvas = document.getElementById("cvs");
          var time_ctx = document.getElementById("time").getContext("2d");
          let user_life_view=document.querySelector('.user_life_view')
          if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
          }
          let body = document.querySelector(".main");
          let yinyang = document.querySelector(".yinyang");
          let stage = {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight,
          };
          body.style.height = document.documentElement.clientHeight + "px";
          canvas.width = document.documentElement.clientWidth;
          canvas.height = document.documentElement.clientHeight;
          let jiguang = document.querySelector(".jiguang");
          jiguang.addEventListener("click", () => {
            jiguang.classList.add("jiguangs");
            setTimeout(() => {
              jiguang.classList.remove("jiguangs");
            }, 4000);
          });
          var cursor_flag = true;

          let boss_item = new boss(body);
          let score = 0;
          let show_boss = false;
          let boss_life_view = document.createElement("div");

          function user_plane() {
            this.life = 5;
            this.atk_level = 1;
            this.speed = 10;
            this.unbeatable_time = false;
            this.create = () => {
              this.dom = document.createElement("div");
              this.dom.classList.add("plane");
              
              body.appendChild(this.dom);
            };
            this.unbeatable = () => {
              this.unbeatable_time = true;
              setTimeout(() => {
                this.unbeatable_time = false;
              }, 1000);
            };
          }
          var user_plan1 = new user_plane();
          user_plan1.create();
          
          body.addEventListener("mousemove", function (e) {
            user_plan1.dom.style.top = e.clientY - 10 + "px";
            user_plan1.dom.style.left = e.clientX - 30 + "px";
            user_plan1.left = e.clientX + 10;
            user_plan1.top = e.clientY + 10;
            if (cursor_flag) {
              cursor_flag = false;
              let stars = document.createElement("div");

              stars.classList.add("star");
              stars.style.top = e.clientY + "px";
              stars.style.left = e.clientX + "px";

              body.appendChild(stars);

              setTimeout(() => {
                let texiao = document.querySelector(".star");
                body.removeChild(texiao);
              }, 1500);
              setTimeout(function () {
                cursor_flag = true;
              }, 100);
            }
          });

          //敌人列表
          let enemy_list = [];
          //敌人
          function enemy() {
            this.life = 1;
            this.speed = 6;
            this.left = 1920;
            this.top = 100;
            this.time = null;
            this.create = (top) => {
              this.dom = document.createElement("div");
              this.dom.classList.add("enemy");
              body.appendChild(this.dom);
              this.dom.style.left = this.left + "px";
              if (top) {
                this.dom.style.top = top + "px";
                this.top = top;
              } else {
                this.dom.style.top = this.top + "px";
              }
            };
            this.move = () => {
              this.time = setInterval(() => {
                if (this.left <= 0) {
                  this.left = 1920;
                  this.top = Math.random() * (stage.height - 50);
                }
                this.dom.style.left = this.left - this.speed + "px";
                this.dom.style.top = this.top + "px";
                this.left -= this.speed;
              }, 20);
            };
            this.die = () => {
              score++;
              if (Math.floor(Math.random() * 10) == 1) {
                //创建奖励

                let award_item = new award(this.left, this.top);
                award_item.create();
                award_list.push(award_item);
              }
            };
          }
          let award_list = [];
          //奖励
          function award(x, y) {
            this.left = x;
            this.top = y;
            this.time = null;
            this.create = () => {
              this.dom = document.createElement("div");
              this.dom.classList.add("award");
              body.appendChild(this.dom);
              this.dom.style.left = this.left + "px";
              this.dom.style.top = this.top + "px";
            };
          }
          //我方子弹
          let bullet_list = [];
          function user_bullet() {
            this.speed = 8;
            this.top = 0;
            this.left = 0;
            this.max_width =2000;
            this.time = null;
            this.move = () => {
              this.time = setInterval(() => {
                this.dom.style.left = this.left + this.speed + "px";
                this.dom.style.top = this.top + "px";
                this.left += this.speed;
                try {
                  if (this.left > this.max_width) {
                    body.removeChild(this.dom);
                    clearInterval(this.time);
                  }
                } catch (err) {
                  clearInterval(this.time);
                }
              }, 20 / user_plan1.atk_level);
            };
            this.create = (x, y) => {
              this.dom = document.createElement("div");
              this.dom.classList.add("user_bullet");
              this.dom.style.top = y + "px";
              this.dom.style.left = x + "px";
              this.left = x;
              this.top = y;
              body.appendChild(this.dom);
            };
          }
          function boss() {
            this.life = 100;
            this.random_atk = 0;
            this.top = 450;
            this.left = 1800;
            this.time = null;
            this.create = () => {
              this.dom = document.createElement("div");
              this.dom.classList.add("boss1");
              this.dom.style.top = this.top + "px";
              this.dom.style.left = this.left + "px";
              body.appendChild(this.dom);
              let befor_atk = 0;
              this.time = setInterval(() => {
                this.random_atk = Math.ceil(Math.random() * 5);
                   
                if (this.random_atk == befor_atk) {
                  return;
                } else {
                  befor_atk = this.random_atk;
                }

                //this.random_atk = 5;
                console.log(this.random_atk);
                switch (this.random_atk) {
                  case 1:
                    boss_atk1(this.top + 100, this.left - 10);
                    return;
                  case 2:
                    boss_atk2(this.top + 100, this.left);
                    return;
                  case 3:
                    boss_atk3(this.top - 100, -400);
                    return;
                  case 4:
                    boss_atk4(user_plan1.top, 0);
                    return;
                  case 5:
                    boss_atk5();
                    return;
                }
              }, 1000);
              // setInterval(() => {
              //     boss_atk2(this.top+100,this.left)
              // }, 1000);
            };
          }
          //散弹
          function boss_atk1(x, y) {
            let num = 0;
            let time = setInterval(() => {
              num++;
              if (num == 4) {
                clearInterval(time);
              }
              for (let i = -5; i <= 5; i++) {
                let enemy_bullet_item = new enemy_bullet();
                let degs = mydeg(-10, 15 * i);
                enemy_bullet_item.create(x, y, degs[0], degs[1]);
                enemy_bullet_list.push(enemy_bullet_item);
              }
            }, 800);
          }
          //后射 然后往前面
          function boss_atk2(x, y) {
            for (let i = -2; i <= 2; i++) {
              let enemy_bullet_item1 = new enemy_bullet1();
              enemy_bullet1_list.push(enemy_bullet_item1);
              let degs = mydeg(10, 30 * i);
              enemy_bullet_item1.create(x, y, degs[0], degs[1]);
            }
          }
          //激光
          function boss_atk3() {
            let enemy_bullet_item3 = new enemy_bullet3();
            enemy_bullet3_list.push(enemy_bullet_item3);
            enemy_bullet_item3.create();
          }
          function boss_atk4(y, x) {
            let num = 0;
            let time = setInterval(() => {
              if (num >= 2) {
                clearInterval(time);
              }
              let enemy_bullet_item4 = new enemy_bullet4();
              enemy_bullet3_list.push(enemy_bullet_item4);
              enemy_bullet_item4.create(user_plan1.top, x);
              num++;
            }, 500);
          }
          function boss_atk5() {
            let num = 0;
            let time = setInterval(() => {
              if (num >= 20) {
                clearInterval(time);
              }
              
              let enemy_bullet_item5 = new enemy_bullet5();
              enemy_bullet5_list.push(enemy_bullet_item5);
              enemy_bullet_item5.create(
                -Math.ceil(Math.random() * 500),
                Math.ceil(Math.random() * 1500)
              );
              num++;
            }, 10);
          }

          let enemy_bullet_list = [];
          //敌人子弹
          function enemy_bullet() {
            this.time = null;
            this.top = null;
            this.left = null;
            this.xspeed = null;
            this.yspeed = null;
            this.speed = null;
            this.create = (top, left, xspeed, yspeed) => {
              this.dom = document.createElement("div");
              this.dom.classList.add("enemy_bullet");
              this.dom.style.top = top + "px";
              this.dom.style.left = left + "px";
              this.left = left;
              this.top = top;
              this.xspeed = xspeed;
              this.yspeed = yspeed;
              body.appendChild(this.dom);
            };
            this.move = () => {
              this.dom.style.left = this.left + this.xspeed + "px";
              this.dom.style.top = this.top + this.yspeed + "px";
              this.left += this.xspeed;
              this.top += this.yspeed;
            };
          }
          let enemy_bullet1_list = [];
          function enemy_bullet1() {
            this.time = null;
            this.top = null;
            this.left = null;
            this.xspeed = null;
            this.yspeed = null;
            this.speed = 2;
            this.speed = null;
            this.create = (top, left, xspeed, yspeed) => {
              this.dom = document.createElement("div");
              this.dom.classList.add("enemy_bullet1");
              this.dom.style.top = top + "px";
              this.dom.style.left = left + "px";
              this.dom.style.zIndex = 1;
              this.xspeed = xspeed;
              this.yspeed = yspeed;
              this.left = left;
              this.top = top;
              body.appendChild(this.dom);
              this.time = setInterval(() => {
                this.dom.style.left = this.left + this.xspeed + "px";
                this.dom.style.top = this.top + this.yspeed + "px";
                this.left += this.xspeed;
                this.top += this.yspeed;
                if (this.left - left >= 300) {
                  this.move(
                    (user_plan1.left - this.left) / 10,
                    (user_plan1.top - this.top) / 10
                  );
                  clearInterval(this.time);
                }
              }, 20);
            };
            this.move = (xspeed, yspeed) => {
              this.xspeed = xspeed / 2;
              this.yspeed = yspeed / 2;
              this.dom.classList.add("line");
              this.time = setInterval(() => {
                this.dom.style.left = this.left + this.xspeed + "px";
                this.dom.style.top = this.top + this.yspeed + "px";
                this.left += this.xspeed;
                this.top += this.yspeed;
              }, 20);
            };
          }
          let enemy_bullet3_list = [];
          function enemy_bullet3() {
            this.time = null;
            this.top = null;
            this.left = null;
            this.xspeed = null;
            this.yspeed = null;
            this.power = true;
            this.atk = true;
            this.create = () => {
              this.dom = document.createElement("div");
              this.dom.classList.add("enemy_bullet3");
              this.dom.classList.add("enemy_bullet3_rotate");
              this.dom.style.top = boss_item.top + "px";
              this.dom.style.left = boss_item.left + "px";
              this.left = boss_item.left;
              this.top = boss_item.top;
              body.appendChild(this.dom);
              this.xspeed = (user_plan1.left - boss_item.left) / 15;
              this.yspeed = (user_plan1.top - boss_item.top) / 15;
              setTimeout(() => {
                this.power = false;
              }, 5000);
              this.move();
            };
            this.move = () => {
              console.log("3移动");
              this.time = setInterval(() => {
                this.dom.style.left = this.left + this.xspeed + "px";
                this.dom.style.top = this.top + this.yspeed + "px";
                this.left += this.xspeed;
                this.top += this.yspeed;
              }, 40);
            };
          }

          function enemy_bullet4() {
            this.time = null;
            this.top = null;
            this.left = -100;
            this.power = true;
            this.atk = false;
            this.create = (top, left) => {
              this.dom = document.createElement("div");
              this.dom.classList.add("enemy_bullet3");
              this.dom.classList.add("enemy_bullet3_line");
              this.dom.style.top = top + "px";
              this.dom.style.left = left + "px";
              body.appendChild(this.dom);
              this.time = setTimeout(() => {
                this.power = false;
              }, 1000);
              setTimeout(() => {
                this.atk = true;
              }, 800);
            };
          }
          //雨滴
          let enemy_bullet5_list = [];
          function enemy_bullet5() {
            this.time = null;
            this.top = null;
            this.create = (y, x) => {
                
              this.dom = document.createElement("div");
              this.dom.classList.add("enemy_bullet5");
              this.dom.style.top = y + "px";
              this.dom.style.left = x + "px";
              this.left = x;
              this.top = y;
              this.yspeed = 10;
              body.appendChild(this.dom);
              this.move();
            };
            this.move = () => {
              this.time = setInterval(() => {
                this.dom.style.top = this.top + this.yspeed + "px";
                this.top += this.yspeed;
              }, 20);
            };
          }

          function mydeg(speed, degs) {
            let xspeed = Math.cos((degs * Math.PI) / 180) * speed; //返回都是负数
            let yspeed = Math.sin((degs * Math.PI) / 180) * speed;
            return [xspeed, yspeed];
          }
          //移出屏幕
          function moveout(item) {
            if (
              item.top < -50 ||
              item.left < -50 ||
              item.top > 2000 ||
              item.left > 2500
            ) {
              return true;
            } else {
              return false;
            }
          }
          ////////////////////////////////////////////
          function crash(oDiv, oDiv2) {
            var t1 = oDiv.offsetTop;
            var l1 = oDiv.offsetLeft;
            var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
            var b1 = oDiv.offsetTop + oDiv.offsetHeight;
            var t2 = oDiv2.offsetTop;
            var l2 = oDiv2.offsetLeft;
            var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
            var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
            if (b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2) {
              // 表示没碰上
              return false;
            } else {
              return true;
            }
          }
          function create_user_bullet() {
            var bullet_item = new user_bullet();
            user_bullet_list.push(bullet_item);
            bullet_item.create(
              Number(user_plan1.dom.style.left.split("p")[0]) + 70,
              Number(user_plan1.dom.style.top.split("p")[0]) + 10
            );
            bullet_item.move();
          }
          let user_bullet_list = [];
          let tep = 0;
          //game线程//////////////////////////////////////////////////////////////////
          let game_time = setInterval(() => {
            if (score >= 15 && show_boss == false) {
              show_boss = true;
              enemy_list.forEach((item, index, arr) => {
                body.removeChild(item.dom)
                item=null
              });
              enemy_list=[]
              console.log(enemy_list)
              
              boss_item.create();
              boss_life_view.classList.add("boss_life_view");
              body.appendChild(boss_life_view)
            }
            if (tep >= 15 / user_plan1.atk_level && user_plan1.life >= 1) {
              create_user_bullet();
              if (enemy_list.length <= 8 && show_boss === false) {
                let enemy_item = new enemy();
                enemy_list.push(enemy_item);
                enemy_item.create(Math.random() * (stage.height - 200));
                enemy_item.move();
              }
              tep = 0;
            }

            //检测玩家子弹和敌军碰撞
            enemy_list.forEach((item1, index1) => {
              user_bullet_list.forEach((item2, index2) => {
                if (crash(item1.dom, item2.dom)) {
                  item1.die();
                  clearInterval(item1.time);
                  clearInterval(item2.time);
                  try {
                    body.removeChild(item1.dom);
                  } catch (e) {

                  }
                  body.removeChild(item2.dom);
                  enemy_list[index1] = null;
                  user_bullet_list[index2] = null;
                  enemy_list.splice(index1, 1);
                  user_bullet_list.splice(index2, 2);
                  return false;
                } else {
                }
              });
            });
            //检测子弹和boss碰撞
            if (show_boss) {
              user_bullet_list.forEach((item, index) => {
                if (crash(item.dom, boss_item.dom)) {
                  del(item, index, user_bullet_list);
                  boss_item.life -= 1;
                  boss_life_view.style.width = boss_item.life * 10 + "px";
                }
              });
            }
            user_life_view.style.width=user_plan1.life*20+'px'
            //检测奖励和玩家碰撞
            award_list.forEach((item, index) => {
              if (crash(user_plan1.dom, item.dom)) {
                del(item, index, award_list);
                user_plan1.atk_level <= 4 ? (user_plan1.atk_level += 1) : "";
              }
            });
            //检测敌人子弹和玩家碰撞
            enemy_bullet_list.forEach((item, index) => {
              if (
                crash(user_plan1.dom, item.dom) &&
                !user_plan1.unbeatable_time
              ) {
                del(item, index, enemy_bullet_list);
                user_plan1.life -= 1;
                user_plan1.unbeatable();
                console.log("打中玩家", user_plan1.life);
                return;
              } else if (moveout(item)) {
                del(item, index, enemy_bullet_list);
                return;
              } else {
                item.move();
              }
            });
            //检测enemy——list超出区域
            enemy_bullet1_list.forEach((item, index) => {
              if (
                crash(user_plan1.dom, item.dom) &&
                !user_plan1.unbeatable_time
              ) {
                del(item, index, enemy_bullet1_list);
                console.log("打中玩家");
                user_plan1.life -= 1;
                user_plan1.unbeatable();
                return;
              } else if (moveout(item)) {
                del(item, index, enemy_bullet1_list);
              }
            });
            //检测雨滴是否超出范围
            enemy_bullet5_list.forEach((item,index) => {
              if (
                crash(user_plan1.dom, item.dom) &&
                !user_plan1.unbeatable_time
              ) {
                del(item, index, enemy_bullet1_list);
                console.log("打中玩家");
                user_plan1.life -= 1;
                user_plan1.unbeatable();
                return;
              } else if (item.top >= 1500) {
                del(item, index, enemy_bullet5_list);
              }
            });
            //检测激光是否还有能量
            enemy_bullet3_list.forEach((item, index) => {
              if (!item.power) {
                del(item, index, enemy_bullet3_list);
              }
            });
            //检测激光和玩家碰撞
            enemy_bullet3_list.forEach((item, index) => {
              if (
                crash(item.dom, user_plan1.dom) &&
                item.atk &&
                !user_plan1.unbeatable_time
              ) {
                user_plan1.life -= 1;
                console.log("射中玩家", user_plan1.life);
                user_plan1.unbeatable();
              }
            });
            //检测boss血量是否为0
            if (boss_item.life <= 0) {
              show_boss = false;
              body.removeChild(boss_item.dom);
              clearInterval(boss_item.time);
              setTimeout(() => {
                boss_item = null;
              }, 1500);
              let end = document.querySelector(".center_text");
              end.style.display = "block";
              end.style.color = "blue";
              end.textContent = "牛逼";
              clearInterval(game_time);
              let ends = setInterval(function () { }, 10000);
              for (let i = 1; i <= ends; i++) {
                  clearInterval(i);
              }
            }
            //检测玩家血量是否为0
            if (user_plan1.life <= 0) {
              body.removeChild(user_plan1.dom);
              setTimeout(() => {
                user_plan1 = null;
              }, 1500);
              let end = document.querySelector(".center_text");
              end.style.display = "block";
              end.textContent = "菜逼";
              clearInterval(game_time);
              let ends = setInterval(function () { }, 10000);
              for (let i = 1; i <= ends; i++) {
                  clearInterval(i);
              }
            }
            tep++;
          }, 20);
          function del(item, index, array) {
            clearInterval(item.time);
            body.removeChild(item.dom);
            array.splice(index, 1);
            item = null;
          }

          /////////////////////////////////////////////

          let rotatex = 0;
          let rotatey = 0;
          body.onmousedown = function (e) {
            let inital_x = e.clientX;
            let inital_y = e.clientY;
            body.onmousemove = function (e) {
              yinyang.style.transform = `rotateY(${
                (e.clientX - inital_x) / 5 + rotatex + "deg"
              }) rotateX(${(e.clientY - inital_y) / 5 + rotatey + "deg"})`;
              rotatex = e.clientX - inital_x + rotatex;
              rotatey = e.clientY - inital_y + rotatey;
              inital_x = e.clientX;
              inital_y = e.clientY;
            };
          };
          //时间
          function time_axts() {
            time_ctx.clearRect(0, 0, 800, 800);
            let colors = time_ctx.createLinearGradient(0, 0, 200, 200);
            time_ctx.beginPath();
            colors.addColorStop(0, "#8360c3");
            colors.addColorStop(0.5, "#2ebf91");
            colors.addColorStop(1, "#009fff");
            time_ctx.font = "50px serif";
            time_ctx.strokeStyle = colors;
            time_ctx.strokeText(times(), 100, 100, 400);
          }
          setInterval(() => {
            time_axts();
          }, 1000);
          function times() {
            let time = new Date();
            let year = time.getFullYear() + "";
            let month = time.getMonth() + 1 + "".padStart("0", 2);
            let day = time.getDate() + "".padStart("0", 2);
            let house = time.getHours() + "".padStart("0", 2);
            let min = time.getMinutes() + "".padStart("0", 2);
            let sec = time.getSeconds() + "".padStart("0", 2);
            return `${year}-${month}-${day} ${house}:${min}:${sec}`;
          }
        };
      </script>
      <style>
        @keyframes myfirst {
          0% {
            background: red;
            left: 100px;
            top: 100px;
          }

          50% {
            background: blue;
            left: 30px;
            top: 50px;
          }
          100% {
            background: red;
            left: 800px;
            top: 100px;
            width: 100px;
            height: 100px;
          }
        }
        @keyframes starss {
          100% {
            width: 30px;
            height: 30px;
            transform: rotateY(720deg) translateY(300px) rotateZ(180deg);
            opacity: 0;
            /* transform: translateY(300px); */
          }
        }
        @keyframes rotate {
          0% {
            transform: rotate(-90deg) scale(1);
          }
          100% {
            transform: rotate(270deg) scale(1);
          }
        }
        .yinyang {
          width: 500px;
          height: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          display: none;
          top: 25%;
          left: 25%;
          transform: rotateX(0deg);
        }
        .contents {
          animation: rotate 10s linear 0s infinite normal both;
          width: 100%;
          height: 100%;
          background-image: url(172304192410.png);
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .center {
          width: 10%;
          height: 10%;
          z-index: 10;
          background-color: aqua;
        }
        .star {
          width: 0px;
          height: 0px;
          position: absolute;
          background: #c6ffdd;
          background: -webkit-linear-gradient(
            to right,
            rgb(198, 255, 221),
            rgb(251, 215, 134),
            rgb(247, 121, 125)
          );
          background: linear-gradient(
            to right,
            rgb(198, 255, 221),
            rgb(251, 215, 134),
            rgb(247, 121, 125)
          );
          /* transition: all 1s linear; */
          transform: rotate(0deg);
          opacity: 1;
          z-index: 100;
          animation: starss 1s linear 1;
        }
        .stars {
          width: 50px;
          height: 50px;
          transform: rotateX(720deg);
          opacity: 0;
          transform: translateY(300px);
        }
        .jiguang {
          width: 10px;
          height: 10px;
          position: absolute;
          background-color: aqua;
          left: 100px;
          top: 100px;
        }
        .jiguangs {
          animation: myfirst 1s ease-in 3;
        }
        * {
          margin: 0;
          padding: 0;
        }
        .main {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          cursor: url(https://blog-static.cnblogs.com/files/zhangshuhao1116/1.ico),
            auto;
          background-image: url(bg.gif);
        }
        .margin {
          position: relative;
          left: calc(50% - 300px);
          top: 200px;
          width: 400px;
          height: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: aqua;
          transform: rotate(0deg);
          transform-origin: right bottom;
          transition: all linear 3s;
          opacity: 0;
        }
        /* .margin:hover{
        transform-origin:right bottom;
        transform: rotate(180deg);
        opacity: 1;
    } */
        .border {
          width: 300px;
          height: 300px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: aquamarine;
        }
        .content {
          width: 50px;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: beige;
        }
        .yang {
          width: 50px;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: black;
        }
        .plane {
          background-image: url(savepic/user.png);
          background-size: 100%;
          width: 73px;
          height: 29px;
          position: absolute;
          top: 100px;
          left: 100px;
        }
        .enemy {
          background-image: url(savepic/other.png);
          background-size: 100%;
          width: 73px;
          height: 29px;
          position: absolute;
          top: 100px;
          left: 1000px;
        }
        .user_bullet {
          background-image: url(savepic/user_atk1.png);
          width: 16px;
          height: 7px;
          position: absolute;
          top: -20px;
          height: -10px;
          background-size: 100%;
        }
        .award {
          background-image: url(savepic/buff_up.png);
          width: 50px;
          height: 50px;
          background-size: 100%;
          position: absolute;
        }
        .enemy_bullet {
          background:linear-gradient(
            to right,
            rgb(28, 40, 214),
            rgb(251, 215, 134),
            rgb(214, 21, 127)
          );
          width: 30px;
          height: 30px;
          border-radius: 50%;
          position: absolute;
        }

        .enemy_bullet1 {
          background-color: aqua;
          width: 50px;
          height: 50px;
          position: absolute;
          transform: rotate(0deg);
          animation: rotate 1s linear 0s infinite normal both;
        }
        .enemy_bullet3 {
          background-image: url(savepic/laser1.png);
          width: 120%;
          height: 50px;
          position: absolute;
          top: 400px;
          left: -400px;
          background-size: 100%;
        }
        @keyframes enemy_bullet3_rotate {
          0% {
            opacity: 1;
            transform: rotate(-80deg);
          }
          100% {
            opacity: 1;
            transform: rotate(270deg);
          }
        }
        .enemy_bullet3_rotate {
          animation: enemy_bullet3_rotate 1s linear 0s infinite;
          width: 400px;
          height: 50px;
          left: 400px;
          border-radius: 50%;
        }
        @keyframes fade {
          0% {
            opacity: 0;
          }
          25% {
            opacity: 0.3;
          }
          50% {
            opacity: 0;
          }
          75% {
            opacity: 0.3;
          }
          85% {
            opacity: 1;
          }
          100% {
            opacity: 1;
          }
        }
        .enemy_bullet3_line {
          animation: fade 1s linear 0s 1 normal both;
        }
        .boss1 {
          width: 200px;
          height: 200px;
          position: absolute;
          background: url(savepic/boss1.png);
          background-size: 100%;
        }
        .line {
          animation: rotate 0.5s linear 0s infinite normal both;
          background: linear-gradient(
            to right,
            rgb(198, 255, 221),
            rgb(251, 215, 134),
            rgb(247, 121, 125)
          );
        }
        .center_text {
          position: absolute;
          width: 100%;
          height: 100%;
          font-size: 200px;
          font-family: "Courier New", Courier, monospace;
          color: rgb(219, 31, 31);
          display: block;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 1);
          text-align: center;
          line-height: 937px;
          z-index: 100000000;
          display: none;
          font-weight: bold;
        }
        .enemy_bullet5{
            background-image: url(savepic/other_atk3.png);
            width: 40px;
            height: 64px;
            background-size: 100%;
            position:absolute;
        }
        .boss_life_view{
            background:linear-gradient(
            to right,
            rgb(250, 4, 4),
            rgb(238, 241, 4),
            rgb(105, 255, 5)
            );
            height: 50px;
            width: 1000px;
            margin-left: 100px;
            border: 4px solid #000;
            left: 50px;
            bottom: 50px;
            position: absolute;
            opacity: 0.5;
        }
        .user_life_view{
            background:linear-gradient(
            to right,
            rgb(250, 4, 4),
            rgb(238, 241, 4),
            rgb(105, 255, 5)
            );
            height: 10px;
            margin-left: 100px;
            border: 4px solid #000;
            left: 10px;
            bottom: 10px;
            position: absolute;
            opacity: 0.5;
        }
      </style>
    </div>
  </body>
</html>
